<!-- 物流详情 -->
<template>
    <div>
        <div style="position: relative;">
            <van-config-provider :theme-vars="themeVars">
                <van-nav-bar
                title="物流详情"
                left-arrow
                :border="false"
                placeholder="true"
                fixed="true"
                @click-left="onClickLeft"
                />
                <img style="width: 100%;position: fixed;z-index: -1;" src="https://www.pmdaniu.com/storages/124210/868aee87bcfe25b7b4bd93393e7a65a6-114945/images/%E7%89%A9%E6%B5%81%E8%AF%A6%E6%83%85/u4946.svg" alt="">
                <div style="position: relative; background-color: white; border-top: solid 1px #eae9e5; padding:20px; padding-top: 12px;  margin-top: 137px;">
                    <!-- 物流程序 -->
                    <div style=" position: absolute;top: -32px;left: 0px; border-radius: 100px 164px 0px 0px / 86px 93px 0px 22px; background-color: white; border: solid 2px #eae9e5; border-bottom: 0px; width: 30%; height: 30px; ">
                        <div style="width: 26px; height: 26px; border-radius: 50%;overflow: hidden;margin-top: 4px;margin-left: 8px; display: inline-block;"><img style="width: 100%; height: 100%;" src="https://img2.baidu.com/it/u=2812151983,130216583&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""></div>
                        <span style="position: absolute; top: 7px; margin-left: 4px; font-weight: bold;font-size: 14px;">顺丰速运</span>
                    </div>
                    <div>
                        <div style="display: flex;justify-content: space-between;">
                            <span style="color: gray;">单号：{{OrderInformation.bianhao}}</span>
                            <span><span>距离：</span><span style="color: #921b31;">940 km</span></span>
                        </div>
                        <!-- 111 -->
                        <div style=" position: relative; height: 66px;">
                            <van-divider :style="{ borderColor:'gray'}"/>
                            <div style="float:left; position: relative;">
                                <div style="position: absolute; background-color: #921b31;width: 18px;height: 18px; border-radius: 50%;">
                                    <div style="margin-top: 3px; margin-left: 3px; position: absolute; background-color: white;width: 12px;height: 12px; border-radius: 50%;"></div>
                                </div>
                            </div>
                            <div style="float: left; margin-left: 28px;">
                                <div style="font-weight: bold; font-size: 14px;"><span>深圳转运中心</span>&nbsp;&nbsp;&nbsp;<span style="color: gray;">发往</span>&nbsp;&nbsp;&nbsp;<span>广州转运中心</span></div>
                                <div style="color: gray; font-size: 12px; margin-top: 10px;"><span>2019年7月12日</span>&nbsp;&nbsp;&nbsp;<span>上午1:54:44</span></div>
                            </div>
                        </div>
                        <!-- 222 -->
                        <div style=" position: relative; height: 66px;">
                            <van-divider :style="{ borderColor:'gray'}"/>
                            <div style="float:left; position: relative;">
                                <div style="position: absolute; background-color: gray;width: 18px;height: 18px; border-radius: 50%;">
                                    <div style="margin-top: 3px; margin-left: 3px; position: absolute; background-color: white;width: 12px;height: 12px; border-radius: 50%;"></div>
                                </div>
                            </div>
                            <div style="float: left; margin-left: 28px;">
                                <div style="font-weight: bold; font-size: 14px; color: gray;"><span>深圳转运中心</span>&nbsp;&nbsp;&nbsp;<span>已收入</span></div>
                                <div style="color: gray; font-size: 12px; margin-top: 10px;"><span>2019年7月12日</span>&nbsp;&nbsp;&nbsp;<span>上午1:54:44</span></div>
                            </div>
                        </div>
                        <!-- 333 -->
                        <div style=" position: relative; height: 66px;">
                            <van-divider :style="{ borderColor:'gray'}"/>
                            <div style="float:left; position: relative;">
                                <div style="position: absolute; background-color: gray;width: 18px;height: 18px; border-radius: 50%;">
                                    <div style="margin-top: 3px; margin-left: 3px; position: absolute; background-color: white;width: 12px;height: 12px; border-radius: 50%;"></div>
                                </div>
                            </div>
                            <div style="float: left; margin-left: 28px;">
                                <div style="font-weight: bold; font-size: 14px; color: gray;"><span>深圳市火车站公司</span>&nbsp;&nbsp;&nbsp;<span>发往</span>&nbsp;&nbsp;&nbsp;<span>深圳转运中心</span></div>
                                <div style="color: gray; font-size: 12px; margin-top: 10px;"><span>2019年7月12日</span>&nbsp;&nbsp;&nbsp;<span>上午1:54:44</span></div>
                            </div>
                        </div>
                        <!-- 444 -->
                        <div style=" position: relative; height: 66px;">
                            <van-divider :style="{ borderColor:'gray'}"/>
                            <div style="float:left; position: relative;">
                                <div style="position: absolute; background-color: gray;width: 18px;height: 18px; border-radius: 50%;">
                                    <div style="margin-top: 3px; margin-left: 3px; position: absolute; background-color: white;width: 12px;height: 12px; border-radius: 50%;"></div>
                                </div>
                            </div>
                            <div style="float: left; margin-left: 28px;">
                                <div style="font-weight: bold; font-size: 14px; color: gray;"><span>深圳火车站公司</span>&nbsp;&nbsp;&nbsp;<span>已打包</span></div>
                                <div style="color: gray; font-size: 12px; margin-top: 10px;"><span>2019年7月12日</span>&nbsp;&nbsp;&nbsp;<span>上午1:54:44</span></div>
                            </div>
                        </div>
                        <!-- 555 -->
                        <div style=" position: relative; height: 66px;">
                            <van-divider :style="{ borderColor:'gray'}"/>
                            <div style="float:left; position: relative;">
                                <div style="position: absolute; background-color: gray;width: 18px;height: 18px; border-radius: 50%;">
                                    <div style="margin-top: 3px; margin-left: 3px; position: absolute; background-color: white;width: 12px;height: 12px; border-radius: 50%;"></div>
                                </div>
                            </div>
                            <div style="float: left; margin-left: 28px;">
                                <div style="font-weight: bold; font-size: 14px; color: gray;"><span>深圳市{{OrderInformation.mingcheng}}快递点</span>&nbsp;&nbsp;&nbsp;<span>已取件</span></div>
                                <div style="color: gray; font-size: 12px; margin-top: 10px;"><span>2019年7月12日</span>&nbsp;&nbsp;&nbsp;<span>上午1:54:44</span></div>
                            </div>
                        </div>
                        <!-- 666 -->
                        <div style=" position: relative; height: 66px;">
                            <van-divider :style="{ borderColor:'gray'}"/>
                            <div style="float:left; position: relative;">
                                <div style="position: absolute; background-color: gray;width: 18px;height: 18px; border-radius: 50%;">
                                    <div style="margin-top: 3px; margin-left: 3px; position: absolute; background-color: white;width: 12px;height: 12px; border-radius: 50%;"></div>
                                </div>
                            </div>
                            <div style="float: left; margin-left: 28px;">
                                <div style="font-weight: bold; font-size: 14px; color: gray;"><span>深圳市{{OrderInformation.mingcheng}}旗舰店</span>&nbsp;&nbsp;&nbsp;<span>已发货</span></div>
                                <div style="color: gray; font-size: 12px; margin-top: 10px;"><span>2019年7月12日</span>&nbsp;&nbsp;&nbsp;<span>上午1:54:44</span></div>
                            </div>
                        </div>
                        <!-- 尾部 -->
                        <div style=" margin-top: 20px; color: #99856f; font-weight: bold; font-size: 18px;display: flex; justify-content: center;">
                            <span>没有更多了哦~</span>
                        </div>
                        <div style="height: 200px;"></div>
                    </div>
                </div>
            </van-config-provider>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted,reactive,ref} from "vue";
import {getorder} from '@/api/order.ts';
import { useRouter,useRoute } from "vue-router";
let OrderInformation = ref([]);
let icon = ref('passed');
const router =useRouter();
const route =useRoute();
const themeVars = {
    NavBarIconColor:'#c1ab96',
    NavBarBackgroundColor:'#eae9e5'
}
const onClickLeft = () => history.back();
onMounted(() => {
    getorder()
    .then(res=>{
            if(route.query.id){
                OrderInformation.value=res.data.data[route.query.id-1]
                if(OrderInformation.value.jiaoyijg==0){
                    icon.value='passed'
                }else{
                    icon.value='close'
                }
            }else{
                // router.push('/home')
                OrderInformation.value=res.data.data[1]
            }
    })
});
</script>
<style>
</style>